<template>
  <Card title="附件文档">
    <template #header-right>
      <tm-button
        v-if="!attachmentlength || attachmentlength < maxSelectCount"
        type="primary"
        :width="160"
        :height="48"
        :margin="[0]"
        :round="10"
        icon="ali-icon icon-line"
        label="关联附件"
        :font-size="24"
        @click="handleAddAttachment"
      ></tm-button>
    </template>
    <view>
      <view class="hb-mb-4 hb-flex hb-items-center hb-justify-center hb-text-xs hb-text-[#646566]">
        仅支持从知识库导入，如需关联请先上传到知识库
      </view>
      <view v-for="(item, index) in botCardInfo.botAttachmentInfoVoList" :key="index">
        <view
          class="hb-flex hb-items-center hb-py-4 hb-border-solid hb-border-[#EBEDF0] hb-border-b"
        >
          <TmIcon
            class="hb-flex-shrink-0"
            :name="`ali-icon ${getFileIcon(item.fileSuffix).icon}`"
            :follow-theme="false"
            :color="getFileIcon(item.fileSuffix).color"
            :font-size="80"
            @click="handleOpenDocument(item)"
          />
          <view
            class="hb-ml-2 hb-flex-1 hb-flex hb-flex-col hb-justify-between"
            @click="handleOpenDocument(item)"
          >
            <TmText _class="text-overflow-1 hb-font-bold" :label="item.fileName" :font-size="28" />
            <view class="hb-flex hb-items-center hb-mt-1">
              <TmText :label="fileSizeConversion(item.fileSize)" :font-size="24" color="#969799" />
              <TmText class="hb-mx-1" label="·" color="#969799" :font-size="24" />
              <TmText :label="formatToDate(item.createTime)" :font-size="24" color="#969799" />
            </view>
          </view>
          <view
            class="hb-pl-4 hb-h-10 hb-flex hb-items-center"
            @click="handleDelAttachment(item.id)"
          >
            <TmIcon name="ali-icon icon-delete" color="#969799" :font-size="32" />
          </view>
        </view>
      </view>
    </view>
  </Card>
</template>

<script lang="ts" setup>
  /* 附件文档组件 */
  import Card from '../../components/Card/index.vue';
  import { getFileIcon } from '@/utils';
  import { formatToDate } from '@/utils/dateUtil';
  import { BotAttachmentInfo, BotCardInfo } from '@/api/card/type';
  import { fileSizeConversion } from '@/utils/file';
  import { botAttachmentDel } from '@/api/card';
  import { useUpload } from '@/hooks/file/useUpload';
  const { openDocument } = useUpload();
  const props = defineProps<{
    botCardInfo: BotCardInfo;
  }>();
  const emit = defineEmits<{
    (e: 'success'): void;
  }>();
  const maxSelectCount = 50;

  const attachmentlength = computed(() => {
    return props.botCardInfo?.botAttachmentInfoVoList?.length || 0;
  });

  const handleAddAttachment = () => {
    navigateTo({
      name: 'attachmentDocsChoose',
      options: {
        maxSelectCount: maxSelectCount - attachmentlength.value,
        success: () => {
          emit('success');
        },
      },
    });
  };

  const handleDelAttachment = async (id: number) => {
    uni.showModal({
      title: '提示',
      content: '确定删除该附件吗？',
      success: async (res) => {
        if (res.confirm) {
          await botAttachmentDel(id);
          emit('success');
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 2000,
          });
        }
      },
    });
  };

  const handleOpenDocument = (item: BotAttachmentInfo) => {
    openDocument({ filePath: item.filePathUrl, fileType: item.fileSuffix });
  };
</script>

<style lang="scss" scoped>
  /* 使用Windi CSS，无需额外样式 */
</style>
